<template>
  <div class="run-modal-style PostAssignRole-page" style="height:330px">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="postForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 岗位名称 -->
        <Form-item prop="postName" :label="$t('module.post.postName')">
          <Input type="text" :maxlength="30" v-model="postForm.postName" disabled ></Input>
        </Form-item>
        <!-- 岗位编码 -->
        <Form-item prop="postCode" :label="$t('module.post.postCode')">
          <Input type="text" :maxlength="30" v-model="postForm.postCode" disabled ></Input>
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="roleTable" :config="tableConfig">
      <div slot="table-bar">
        <RPButton optType="create" @click="add" />
        <RPButton optType="delete" @click="deleted()" />
      </div>
    </InnerPageTable>
  </div>
</template>
<script>
import PostSelectRole from "./PostSelectRole.vue";
import postAPI from "@/api/postApi.js";
import { postAssignRoleColumns } from "./columns.js";
import locales from "./locales.js";

export default {
  name: "postassignrole",
  mixins: [locales],
  props: {
    postId: {
      type: String,
      default() {
        return "";
      }
    },
    postName: {
      type: String,
      default() {
        return "";
      }
    },
    postCode: {
      type: String,
      default() {
        return "";
      }
    },
    productId: {
      type: String,
      default() {
        return "";
      }
    },
    treeNodeId: {
      type: String,
      default() {
        return "";
      }
    },
    appId: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      tableData: [],
      postForm: {
        postName: this.postName,
        postCode: this.postCode
      },
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          theme: "primary",
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },
  computed: {
    tableConfig() {
      return { columnsFn: postAssignRoleColumns.bind(this), resource: this.tableData, isPage: false, autoFirst: false };
    }
  },
  created: function() {
    this.search();
    this.$emit("SetTitle", this.$t("module.userManage.assignRoles"));
    this.$emit("SetPageWidth", 706);
    this.$emit("SetPageActions", this.actions);
  },
  methods: {
    search() {
      postAPI
        .queryPostAssignedRole(this.postId)
        .then(data => {
          this.tableData = data;
          this.$refs["roleTable"].loadLocal();
        })
        .catch(data => {
          this.$message.error({
            content: data.message,
            duration: 3
          });
        });
    },

    add() {
      new this.$pageModal(
        PostSelectRole,
        {
          props: { productId: this.productId, treeNodeId: this.treeNodeId, appId: this.appId }
        },
        data => {
          if (data && data.length > 0) {
            let assignedRoles = this.$refs["roleTable"].tableData;
            let unassignedroles = data.filter(role => {
              // 去掉重复数据
              for (let index = 0; index < assignedRoles.length; index++) {
                if (assignedRoles[index].roleId == role.id) {
                  return false;
                }
              }
              role.roleId = role.id;
              return true;
            });
            this.$refs["roleTable"].tableData = this.$refs["roleTable"].tableData.concat(unassignedroles);
          }
        }
      );
    },
    deleted() {
      let selectedRows = this.$refs["roleTable"].getSelectioned();
      this.removeRow(selectedRows);
    },
    removeRow(selectedRows) {
      selectedRows.forEach(role => {
        let allRows = this.$refs["roleTable"].tableData;
        for (let index = 0; index < allRows.length; index++) {
          const row = allRows[index];
          if (role.id == row.id) {
            // 从列表删除选中行
            this.$refs["roleTable"].tableData.splice(index, 1);
            continue;
          }
        }
      });
    },
    save() {
      this.actions[0].loading = true;
      let roles = [];
      this.$refs["roleTable"].tableData.forEach(role => {
        roles.push({
          postId: this.postId,
          roleId: role.roleId
        });
      });
      let params = {
        postId: this.postId,
        postRoleRelList: roles
      };
      postAPI
        .savePostAssignedRole(params)
        .then(response => {
          this.actions[0].loading = false;
          this.$message.success({
            content: "分配角色成功",
            duration: 3
          });
          this.$emit("Close", true);
        })
        .catch(data => {
          this.actions[0].loading = false;
        });
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
// ok统一注释的样式
// .PostAssignRole-page {
//   .search-bar {
//     div:first-child {
//       margin-right:0px!important;
//       .ivu-form {
//         .ivu-form-item {
//           .ivu-form-item-content {
//             padding-left: 10px!important;
//             margin-right: 16px!important;
//           }
//         }
//       }
//     }
//   }
// }
</style>